<template>
    <div style="width: 100%;">
        <h1 style="padding-left: 30px;">新增考试</h1>
        <div style="width: 100%;display:flex;align-items: center; justify-content: center;">
            <label style="font-size: 17px;">考试名称:</label>
            <el-input v-model="inputExamName" clearable style="width: 200px;margin-left: 20px;"></el-input>
            <label style="font-size: 17px;margin-left: 20px;">考试日期:</label>
            <el-date-picker placeholder="选择日期" style="margin-left: 20px;" v-model="inputExamDate" format="YYYY-MM-DD" />
            <el-button type="success" style="margin-left: 30px;" @click="submitAdd"> 提交</el-button>
        </div>
        <h1 style="padding-left: 30px;">查询考试</h1>
        <div style="width: 100%;display:flex; flex-direction: column;align-items: center; margin-top: 30px;">
            <!-- 表格 -->
            <el-table :data="tableData" border style="width: 70%;" fixed stripe show-overflow-tooltip>
                <el-table-column prop="examNum" label="考试编号" width="100" />
                <el-table-column prop="examName" label="考试名称" />
                <el-table-column prop="examDate" label="考试时间"  width="120px"/>
                <el-table-column prop="createDate" label="创建时间" width="170px"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                        <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                        <el-button size="small" type="indo"
                            @click="handleClean(scope.$index, scope.row)">Clean</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next,jumper" :current-page="current" :page-size="pageSize"
                :total="pageTotal" @current-change="currentChange" hide-on-single-page style="margin-top: 20px;" />
        </div>

        <!-- 编辑弹框 -->
        <el-dialog v-model="visible" :show-close="false" width="500">
            <template #header="{ close, titleId, titleClass }">
                <div style="width: 100%;">
                    <div style="display: flex;justify-content: center;flex-direction: column;">
                        <div style="flex-wrap:1;display: flex;justify-content: center;">
                            <label>考试编号:</label>
                            <el-input disabled v-model="editExamNum" style="width: 200px;margin-left: 30px;"></el-input>
                        </div>
                        <div style="flex-wrap:1;display: flex;justify-content: center; margin-top: 30px;">
                            <label>考试名称:</label>
                            <el-input v-model="editExamName" style="width: 200px;margin-left: 30px;"></el-input>
                        </div>
                        <div style="flex-wrap:1;display: flex;justify-content: center; margin-top: 30px;">
                            <label>考试日期:</label>
                            <el-date-picker placeholder="选择日期" style="margin-left: 30px;width: 200px;"
                                v-model="editExamDate" format="YYYY-MM-DD" />
                        </div>
                    </div>
                    <div style="display: flex;justify-content: center;margin-top: 50px;">
                        <el-button type="primary" @click="close">
                            取消
                        </el-button>
                        <el-button type="success" @click="submitEdit" style="margin-left: 100px;">
                            提交
                        </el-button>
                    </div>

                </div>
            </template>
        </el-dialog>

        <!-- 清除成绩选项 -->
        <el-drawer v-model="isShowDrawer" title="I am the title" :with-header="false" direction="ttb">
            <div style="display: flex; justify-content: center;">
                <span style="color:aquamarine;"> 选择指定班级进行清除(清除本班级在本场考试中导入的成绩)</span>
            </div>
            <div style="display: flex;justify-content: center;align-items: center;margin-top: 50px;">
                <label style="margin-right: 30px;">班级:</label>
                <el-select v-model="cleanSelectValue" placeholder="Select" size="small" style="width: 200px">
                    <el-option v-for="item in cleanSelectOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <el-button type="success" style="margin-left: 50px;" @click="handleCleanSubmit">提交</el-button>
            </div>

        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
    import axios from '../utils/http';
    import { ElMessage } from 'element-plus';
    import { onMounted, ref, } from 'vue';

    const inputExamName = ref('');
    const inputExamDate = ref('')


    const tableData = ref([])

    const pageTotal = ref(0)
    const pageSize = ref(10)

    const visible = ref(false)  // 控制编辑弹框显示
    const editExamNum = ref(0)
    const editExamName = ref('')
    const editExamDate = ref('')
    const current = ref(1);

    const isShowDrawer = ref(false)
    const cleanExamNum = ref(0)
    const cleanSelectValue = ref('')
    const cleanSelectOptions = ref([])

    const currentChange = (val) => {
        current.value = val;
        selectPage();
    }

    const submitAdd = () => {
        if (inputExamName.value == '') {
            ElMessage({
                message: '请输入班级名称',
                type: 'warning',
            })
            return;
        }
        axios.post("/exam/add/", { examName: inputExamName.value, examDate: inputExamDate.value }).then(res => {
            if (res.code != 500) {
                ElMessage({
                    message: '提交成功',
                    type: 'success',
                })
                selectPage();
            }
        });
    }

    const handleEdit = (index : number, row) => {
        visible.value = true;
        editExamNum.value = tableData.value[index].examNum;
        editExamName.value = tableData.value[index].examName;
        editExamDate.value = tableData.value[index].examDate;
    }

    const submitEdit = () => {
        axios.post("/exam/edit", { examNum: editExamNum.value, examName: editExamName.value, examDate: editExamDate.value })
            .then(res => {
                if (res.code == 200) {
                    visible.value = false;
                    ElMessage({
                        message: '编辑成功',
                        type: 'success'
                    })
                    tableData.value.forEach(d => {
                        if (d.examNum == editExamNum.value) {
                            d.examName = editExamName.value;
                            d.examDate = editExamDate.value;
                        }
                    });
                }
            })
    }

    const handleDelete = (index : number, row) => {
        axios.delete("/exam/del/" + tableData.value[index].examNum).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                tableData.value.splice(index, 1);
            }
        })

        // console.log('handleDelete', tableData.value)
    }

    const handleClean = (index : number, row) => {
        isShowDrawer.value = true;
        cleanExamNum.value = tableData.value[index].examNum;
        cleanSelectOptions.value = [];
        axios.get("/classc/selectClassByExamNum/" + cleanExamNum.value)
            .then(res => {
                res.data.forEach(classc => {
                    cleanSelectOptions.value.push({ label: classc.className, value: classc.classNum });
                });
                if (cleanSelectOptions.value.length > 0) {
                    cleanSelectValue.value = cleanSelectOptions.value[0].value;
                }
                // console.log('tableData.value', tableData.value)
            })
    }

    const handleCleanSubmit = () => {
        axios.post("/classc/clean", { classNum: cleanSelectValue.value, examNum: cleanExamNum.value })
            .then(res => {
                if (res.code != 500) {
                    ElMessage({ type: 'success', message: "清除成功" })
                    isShowDrawer.value = false;
                }
            })
    }

    const selectPage = () => {
        axios.post("/exam/page", { current: current.value, size: pageSize.value })
            .then(res => {
                tableData.value = res.data.records;
                pageTotal.value = res.data.total;
                // console.log('tableData.value', tableData.value)
            })
    }

    onMounted(() => {
        selectPage();
    });
</script>

<style>
    .el-table .cell {
        width: 100%;
    }
</style>